<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="nav-left" @click="goBack">
				<u-icon name="arrow-left" color="#000" size="36upx"></u-icon>
			</view>
			<view class="nav-title">积分充值</view>
			<view class="nav-right"></view>
		</view>

		<!-- 积分余额卡片 -->
		<view class="points-card">
			<image src="/static/recharge-bg.png" class="points-bg"></image>
			<view class="card-header">
				<text class="card-title">积分余额</text>
				<view class="points-info" @click="showPointsInfo">
					<view class="info-text">积分说明</view>
					<view class="info-icon">
						<u-icon name="question-circle" color="#c1d0ff" size="30upx"></u-icon>
					</view>
				</view>
			</view>
			<view class="points-amount">
				<text class="amount-number">4532</text>
				<text class="amount-label">当前积分</text>
			</view>
		</view>

		<!-- 充值金额选择 -->
		<view class="recharge-section">
			<view class="section-title">充值金额</view>
			<view class="amount-grid">
				<view class="amount-item" :class="selectedAmount === 10 ? 'active' : ''" @click="selectAmount(10)">
					<text class="amount-price">¥ 10</text>
					<text class="amount-points">积分：10</text>
				</view>
				<view class="amount-item" :class="selectedAmount === 20 ? 'active' : ''" @click="selectAmount(20)">
					<text class="amount-price">¥ 20</text>
					<text class="amount-points">积分：20</text>
				</view>
				<view class="amount-item" :class="selectedAmount === 30 ? 'active' : ''" @click="selectAmount(30)">
					<text class="amount-price">¥ 30</text>
					<text class="amount-points">积分：30</text>
				</view>
				<view class="amount-item" :class="selectedAmount === 50 ? 'active' : ''" @click="selectAmount(50)">
					<text class="amount-price">¥ 50</text>
					<text class="amount-points">积分：50</text>
				</view>
				<view class="amount-item" :class="selectedAmount === 100 ? 'active' : ''" @click="selectAmount(100)">
					<text class="amount-price">¥ 100</text>
					<text class="amount-points">积分：100</text>
				</view>
				<view class="amount-item other-amount" :class="isOtherAmount ? 'active' : ''"
					@click="selectOtherAmount">
					<text class="amount-text">其他金额</text>
				</view>
			</view>
		</view>

		<!-- 银行卡支付 -->
		<u-radio-group v-model="selectedPayment" @change="selectPayment" style="display: flex; flex-direction: column;">
			<view class="payment-box">
				<view class="payment-section">
					<view class="payment-item" @click="selectPayment('postbank')">
						<text class="payment-text">邮储银行借记卡</text>
						<u-radio name="postbank" active-color="#2892ff" size="24" iconSize="20"></u-radio>
					</view>
					<view class="payment-item" @click="selectPayment('pudongbank')">
						<text class="payment-text">使用浦东发展银行卡</text>
						<u-radio name="pudongbank" active-color="#2892ff" size="24" iconSize="20"></u-radio>
					</view>
					<view class="payment-item switch-payment" @click="switchPaymentMethod">
						<text class="payment-text">切换其他银行卡支付</text>
					</view>
				</view>
			</view>

			<!-- 其它支付方式 -->
			<view class="other-payment-box">
				<view class="other-payment-section">
					<view class="other-payment-title">其它支付方式</view>
					<view class="payment-methods">
						<view class="payment-method" @click="selectPayment('wechat')">
							<view class="method-left">
								<view class="weixin-icon">
									<image src="/static/icon/weixin.png" mode="aspectFit"
										style="width: 46upx;height: 46upx;"></image>
								</view>
								<text class="method-name">微信</text>
							</view>
							<u-radio name="wechat" active-color="#2892ff" size="24" iconSize="20"></u-radio>
						</view>
						<view class="payment-method" @click="selectPayment('alipay')">
							<view class="method-left">
								<view class="alipay-icon">
									<image src="/static/icon/zhifubao.png" mode="aspectFit"
										style="width: 46upx;height: 46upx;"></image>
								</view>
								<text class="method-name">支付宝</text>
							</view>
							<u-radio name="alipay" active-color="#2892ff" size="24" iconSize="20"></u-radio>
						</view>
					</view>
				</view>
			</view>
		</u-radio-group>

		<!-- 支付按钮 -->
		<view class="pay-button-section">
			<view class="pay-button" @click="confirmPayment">
				<text class="pay-text">{{ payButtonText }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			selectedAmount: 10, // 默认选中10元
			isOtherAmount: false,
			selectedPayment: 'wechat', // 默认选中微信
			currentPoints: 4532
		};
	},
	computed: {
		payButtonText() {
			return `${this.selectedAmount}.00元  立即支付`;
		}
	},
	methods: {
		// 返回
		goBack() {
			uni.navigateBack();
		},

		// 选择充值金额
		selectAmount(amount) {
			this.selectedAmount = amount;
			this.isOtherAmount = false;
		},

		// 选择其他金额
		selectOtherAmount() {
			this.isOtherAmount = true;
			// 这里可以弹出输入框让用户自定义金额
			uni.showModal({
				title: '自定义金额',
				editable: true,
				placeholderText: '请输入充值金额',
				success: (res) => {
					if (res.confirm && res.content) {
						const amount = parseFloat(res.content);
						if (amount > 0) {
							this.selectedAmount = amount;
						}
					}
				}
			});
		},

		// 选择支付方式
		selectPayment(payment) {
			this.selectedPayment = payment;
		},

		// 切换支付方式
		switchPaymentMethod() {
			this.$api.msg('切换其他银行卡支付');
		},

		// 显示积分说明
		showPointsInfo() {
			uni.showModal({
				title: '积分说明',
				content: '积分可用于商城消费抵扣现金，1积分=1元',
				showCancel: false
			});
		},

		// 确认支付
		confirmPayment() {
			if (!this.selectedAmount) {
				this.$api.msg('请选择充值金额');
				return;
			}

			if (!this.selectedPayment) {
				this.$api.msg('请选择支付方式');
				return;
			}

			// 这里处理支付逻辑
			uni.showModal({
				title: '确认支付',
				content: `确认使用${this.getPaymentName()}支付${this.selectedAmount}元充值积分？`,
				success: (res) => {
					if (res.confirm) {
						this.processPayment();
					}
				}
			});
		},

		// 获取支付方式名称
		getPaymentName() {
			const paymentNames = {
				'postbank': '邮储银行借记卡',
				'pudongbank': '浦东发展银行卡',
				'wechat': '微信支付',
				'alipay': '支付宝'
			};
			return paymentNames[this.selectedPayment] || '';
		},

		// 处理支付
		processPayment() {
			// 模拟支付过程
			uni.showLoading({
				title: '支付中...'
			});

			setTimeout(() => {
				uni.hideLoading();
				this.$api.msg('支付成功');
				// 支付成功后可以返回上级页面或跳转到支付结果页
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}, 2000);
		}
	}
}
</script>

<style lang="scss">
page {
	background: #f8f8f8;
}

.container {
	background: #f8f8f8;
}

// 导航栏
.navbar {
	background: #f8f8f8;
	height: 88upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 40upx;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding-top: var(--status-bar-height);
	height: calc(88upx + var(--status-bar-height));

	.nav-left {
		width: 80upx;

		.back-icon {
			font-size: 48upx;
			color: #000;
			font-weight: 300;
		}
	}

	.nav-title {
		font-size: 36upx;
		font-weight: 400;
		color: #000;
	}

	.nav-right {
		width: 80upx;
	}
}

// 积分余额卡片
.points-card {
	height: 280upx;
	margin: calc(88upx + var(--status-bar-height) + 30upx) 30upx 0;
	border-radius: 20upx;
	padding: 20upx 36upx;
	position: relative;
	overflow: hidden;
	box-shadow: 0 18upx 10upx -6upx rgba(0, 122, 255, 0.3);

	.points-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.card-header {
		position: relative;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 42upx;

		.card-title {
			font-size: 30upx;
			color: #fff;
			font-weight: 400;
		}

		.points-info {
			display: flex;
			align-items: center;
			gap: 10upx;

			.info-text {
				font-size: 26upx;
				color: #c1d0ff;
			}

			.info-icon {
				transform: translateY(2upx);
			}
		}
	}

	.points-amount {
		text-align: center;
		position: relative;
		z-index: 2;

		.amount-number {
			display: block;
			font-size: 70upx;
			color: #fff;
			letter-spacing: -2upx;
		}

		.amount-label {
			font-size: 24upx;
			color: rgba(255, 255, 255, 0.7);
		}
	}
}

// 充值金额选择
.recharge-section {
	padding: 0 30upx;

	.section-title {
		font-size: 30upx;
		color: #333;
		font-weight: 400;
		margin: 40upx 0 20upx;
	}

	.amount-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16upx;

		.amount-item {
			background: #fff;
			border: 2upx solid #E5E5EA;
			border-radius: 12upx;
			padding: 28upx 20upx;
			text-align: center;

			&.active {
				background: #fa436a;
				color: #fff;

				.amount-points {
					font-size: 22upx;
					color: rgba(255, 255, 255, 0.7);
				}
			}

			&.other-amount {
				display: flex;
				align-items: center;
				justify-content: center;

				.amount-text {
					font-size: 28upx;
					color: #666;
				}
			}

			.amount-price {
				display: block;
				font-size: 32upx;
				font-weight: 500;
				margin-bottom: 6upx;
			}

			.amount-points {
				font-size: 22upx;
				color: #999;
			}
		}
	}
}

// 银行卡支付
.payment-box {
	padding: 30upx;
}

.payment-section {
	background: #fff;
	border-radius: 20upx;
	padding: 0 30upx;

	.payment-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 34upx 0;
		border-bottom: 1upx solid #eeeeee;

		&:last-child {
			border-bottom: none;
		}

		&.switch-payment {
			.payment-text {
				color: #666;
			}
		}

		.payment-text {
			font-size: 32upx;
			color: #000;
		}

		.payment-check {
			width: 40upx;
			height: 40upx;
			border: 3upx solid #ddd;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;

			&.active {
				border-color: #007AFF;
				background: #007AFF;

				.check-icon {
					color: #fff;
					font-size: 20upx;
					font-weight: bold;
				}
			}
		}

		.arrow {
			font-size: 28upx;
			color: #C7C7CC;
			font-weight: 400;
		}
	}
}

// 其它支付方式
.other-payment-box {
	padding: 0 30upx;

	.other-payment-section {
		background: #fff;
		border-radius: 20upx;
		overflow: hidden;

		.other-payment-title {
			text-align: center;
			color: #666;
			padding: 30upx 0;
			font-size: 28upx;
			border-bottom: 1upx solid #eeeeee;
		}

		.payment-methods {
			background: #fff;
			border-radius: 0;
			padding: 0 30upx;

			.payment-method {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 32upx 0;
				border-bottom: 1upx solid #eeeeee;

				&:last-child {
					border-bottom: none;
				}

				.method-left {
					display: flex;
					gap: 24upx;

					.weixin-icon {
						width: 56upx;
						height: 56upx;
					}

					.method-icon {
						width: 56upx;
						height: 56upx;
						border-radius: 10upx;
					}

					.alipay-icon {
						width: 56upx;
						height: 56upx;
					}

					.method-name {
						font-size: 32upx;
						color: #000;
					}
				}

				.payment-check {
					width: 40upx;
					height: 40upx;
					border: 3upx solid #ddd;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;

					&.active {
						border-color: #007AFF;
						background: #007AFF;

						.check-icon {
							color: #fff;
							font-size: 20upx;
							font-weight: bold;
						}
					}
				}
			}
		}
	}
}

// 支付按钮
.pay-button-section {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	height: 160upx;
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 100;
	box-shadow: 0 -6upx 6upx rgba(0, 0, 0, 0.06);

	.pay-button {
		width: 80%;
		height: 88upx;
		background: linear-gradient(135deg, #007AFF 0%, #005BBB 100%);
		border-radius: 44upx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8upx 20upx rgba(0, 122, 255, 0.3);

		.pay-text {
			font-size: 30upx;
			color: #fff;
			font-weight: 500;
		}
	}
}
</style>